<template>
  <div
    class="flex items-center pl-4 pr-6 h-11"
    :class="
      props.indexMainList == item.id
        ? 'bg-indigo-200 border-r-2 border-solid text-indigo-600 border-indigo-600'
        : 'transition-all hover:text-indigo-600'
    "
    v-for="item in props.data"
    :key="item.id"
    @click="onMainList(item.arrKey, item.id)"
  >
    <div> <img style="width: 20px" :src="item.Icon" /></div>
    <div class="text-sm pl-2"> {{ item.name }} </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  data: {
    name: string
    id: string
    arrKey: string
    Icon: string
  }[]
  indexMainList: string
}>()

const emit = defineEmits(['onMainList'])

const onMainList = (arrKey, id) => {
  emit('onMainList', arrKey, id)
}
</script>
